<template>
	<view class="root-box">
		<view class="pic-box mt-10">
			<lst-upimg :type="4" :multiple="true" :maxCount="5" @success="e => upimgSuccess(e)">
				<view class="addImg">
					<uv-icon name="camera" color="#E7E7E7" size="60" />
					<!-- <text>添加图片</text> -->
				</view>
			</lst-upimg>
		</view>
		<view class="content">
			<view class="upload-msg">请至少上传3张图片</view>
		</view>
		
		<view class="bt-item">
			<tui-button type="danger" width="670rpx" height="70rpx" size="28" @click="onSubmit">确定</tui-button>
		</view>
			
		   
	<skilledNavbar :tabValue="tabValue"></skilledNavbar>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	
	import {
		useUserStore
	} from '@/store'
	import {
		storeToRefs
	} from 'pinia'
	
	import {
		technicianCompleteTheService
	} from '@/api/other.js'
	
	
	import {
		navigate,
		appendKeyValuesToArray
	} from '@/util/tools.js';
	import skilledNavbar from './components/skilled_navbar.vue'

    const tabValue = ref(1)
	const orderId=ref(0)
	const user = useUserStore()
	const {
		token,
		userInfo
	} = storeToRefs(user)
	
	const listImage = ref([]);
	const upimgSuccess = (fileList) => {
		listImage.value = fileList
		console.log('---listImage.value----',listImage.value)
	}
	const onSubmit= async()=>{
		let params={}
		params.images=appendKeyValuesToArray(listImage.value,'src')
		params.order_id = orderId.value
		const res = await technicianCompleteTheService(params)
		if(res.code==200){
			let url='/pages-public/operation_result?status=success&title=完成服务&desc=本次服务已完成，感谢您的辛苦付出&back_num=2'
			navigate(url)
		}else{
			uni.$uv.toast('操作发生错误')
		}
	}
	
	onLoad((options) => {
		if (options.id) {
			orderId.value = decodeURIComponent(options.id)
		}
	})
	
	
	
	
	
	const init = async () => {}
	init()
</script>
<style>
	
	
</style>
<style lang="scss" scoped>
	.root-box {
		background-color: #efefef;
		min-height:100vh;
		padding-top: 10upx;
	    .content {
			padding: 10upx 30upx;
			box-sizing: border-box;
        }
	}
	
	.pic-box{
		background-color: #fff;
		padding: 40upx 30upx;
		box-sizing: border-box;
		display: flex;
		
	}
	

	
	::v-deep .uv-upload__wrap__preview {
	  display: grid !important;
	  place-items: center;   /* 水平 + 垂直居中 */
	}
	
	::v-deep .uv-upload__wrap{
		display: grid !important;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);  
		gap: 20upx;                            
		padding: 20upx;
	}
	
	
	
	.addImg {
		display: flex;
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		align-items: center;
		justify-content: center;
	    background-color: #F0F0F0;
	}
	
	.upload-msg{
		display: flex;
		justify-content: flex-end;
		font-size: 24upx;
		color: #333;
	}
	
	.bt-item{
		margin-top: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	
	
	
</style>